<template>
  <div class="list" v-if="this.data">
    <div class="list-item" v-for="items in this.data" :key="items.blid">
      <router-link :to="`/BooksDetails/${items.lid}`" class="left">
        <img :src="items.lsrc" alt="" />
      </router-link>
      <div class="right">
        <div class="r-top">
          <router-link :to="`/BooksDetails/${items.lid}`" class="bookname">
            {{ items.lname }}
          </router-link>
        </div>
        <span class="word"> 推荐语:{{ items.lwords }} </span>
        <span class="user">
          创建人:{{ items.name }}
          <em @click="addGz(items.id)" class="el-icon-message-solid"></em>
        </span>
      </div>
    </div>
    <div class="pagination">
      <button @click="minusPage" :disabled="this.page == 1">上一页</button>
      <span>{{ page }}</span>
      <button @click="addPage" :disabled="this.maxPage == page">下一页</button>
      <span>共{{ maxPage }}页</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      page: 1,
      maxPage: 1,
    };
  },
  //监听页数发生改变
  watch: {
    page() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  computed: {},
  methods: {
    // 挂载时(页面出生,显示),自动触发请求
    // 发送请求
    getData() {
      const url = "http://127.0.0.1:3000/v1/library/booklist";
      console.log(url);
      this.axios.get(url).then((res) => {
        this.data = res.data;
        console.log("this.data:", this.data);
        console.log("this.length:", this.data.length);
        this.maxPage = Math.ceil(this.data.length / 12);
        this.data = this.data.slice(12 * (this.page - 1), 12 * this.page);
      });
    },
    addGz(id) {
      const url4 = "http://127.0.0.1:3000/v1/library/updateguanzhu";
      const params = `id=${id}`;
      console.log(url4, params);
      this.axios.put(url4, params).then((res) => {
        console.log("关注成功！");
      });
    },
    addPage() {
      this.page += 1;
    },
    minusPage() {
      this.page -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
*a {
  text-decoration: none;
  color: #000;
}
* {
  margin: 0;
  padding: 0;
}

.pagination {
  text-align: center;
  padding: 15px;
  // border: 1px solid black;
  span {
    padding: 0 15px;
  }
  button {
    border-color: hsla(0, 0%, 100%, 0.5);
    border-radius: 5px;
    padding: 5px;
    // border: none;
    // outline: none;
  }
  button:hover {
    background-color: blue;
  }
}

.list {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.list-item {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid black;

  .left {
    img {
      width: 127px;
      height: 180px;
    }
  }
  .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    justify-content: space-around;

    .r-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        margin: 10px;
      }
    }
    .bookname {
      display: flex;
      justify-content: flex-start;
      margin-top: 15px;
      font-size: 1.8rem;
      font-weight: 400;
    }
    .user {
      display: flex;
      justify-content: flex-end;
      font-size: 1.2rem;
    }
    .word {
      margin-top: 10px;
      font-size: 1rem;
    }
  }
}
.two-right {
  margin-left: 15px;
}
</style>
